<template>
  <div class="mine">
    <header>
      <i></i>
      <span>15399999999</span>
    </header>
    <section class="indent">
      <div class="myindent"><span>我的订单</span><i>全部订单 ></i></div>
      <ul>
        <li v-for='(item,index) in indentArr' :key="index">
          <span :class="item.icon"></span>
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </section>
    <section class="type">
      <ul>
        <li>
          <div>
            <p class="iconfont icon-wode"><span>会员中心</span><span>></span></p>
            <i></i>
            <p class="iconfont icon-shouhuo" @click="addressFn"><span>收货地址</span><span>></span></p>
          </div>
        </li>
        <li>
          <div>
            <p class="iconfont icon-red-packet_icon"><span>我的优惠</span><span>></span></p>
            <i></i>
            <p class="iconfont icon-yijianfankui"><span>我的意见</span><span>></span></p>
          </div>
        </li>
        <li>
          <div>
            <p class="iconfont icon-guanbi"><span>浏览记录</span><span>></span></p>
          </div>
        </li>
        <li>
          <div>
            <p class="iconfont icon-fenlei"><span>我的名片</span><span>></span></p>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>

export default {
  name: 'Mine',
  components: {
  },
  data () {
    return {
      indentArr: [
        { icon: 'iconfont gouwuche-n icon-tubiao-', title: '待付款' },
        { icon: 'iconfont icon-red-packet_icon', title: '优惠券' },
        { icon: 'iconfont icon-biaoqiankuozhan_tuijian-126', title: '收藏' }
      ]
    }
  },
  methods: {
    // 收货地址
    addressFn () {
      this.$router.push('/profile')
    }
  }
}
</script>

<style lang="less" scoped>
header{
  width: 100%;
  height: .8rem;
  background: #f37d0f;
  display: flex;
  align-items: center;
  i{
    display: inline-block;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    border: .04rem solid #f8b16f;
    margin: 0 .13rem;
  }
  span{
    color: #fff;
  }
}
.indent{
  width: 100%;
  .myindent{
    padding: .15rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
    span{
      font-size: .14rem;
    }
    i{
      font-style: normal;
    }
  }
  ul{
    padding: .23rem 0;
    display: flex;
    text-align: center;
    li{
      flex: 1;
      font-size: .12rem;
    }
  }
}
.type{
  width: 100%;
  border-bottom: 1px solid #cccccc;
  ul{
    width: 100%;
    border-bottom: .2rem solid #f5f5f5;
    li{
      background: #fff;
      border-top: .1rem solid #f5f5f5;
      padding: 0 .15rem;
      width: 1005;
      div{
        position: relative;
        p{
          color: #ff6600;
          font-size: .2rem;
          height: .58rem;
          line-height: .58rem;
          span{
            font-size: .18rem;
            color: #000;
          }
          span:first-of-type{
            position: absolute;
            left: .3rem;
          }
          span:last-of-type{
            position: absolute;
            right: 0;
          }
        }
        i{
          position: absolute;
          width: 96%;
          height: .01rem;
          background: #d9d9d9;
          right: -.15rem;
          top: 50%;
        }
      }
    }
  }
}
</style>
